<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="帖子类型" prop="type">
        <el-select
          @change="handleQuery"
          v-model="queryParams.type"
          placeholder="选择分类"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="dict in post_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="帖子标题" v-if="!showContent.includes(queryParams.type)" prop="title" label-width="100">
        <el-input
          v-model="queryParams.title"
          placeholder="帖子标题"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="发布人名称" prop="nickname" label-width="100">
        <el-input
          v-model="queryParams.nickname"
          placeholder="发布人名称"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="发帖人分类" prop="publishApplication" label-width="100">
        <el-select
          @change="handleQuery"
          v-model="queryParams.publishApplication"
          placeholder="选择分类"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="dict in post_publish_application"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="发帖时间周期" label-width="100">
        <el-date-picker
          v-model="dateRange"
          value-format="YYYY-MM-DD HH:mm:ss"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="[
            new Date(2000, 1, 1, 0, 0, 0),
            new Date(2000, 1, 1, 23, 59, 59),
          ]"
        ></el-date-picker>
      </el-form-item>

      <el-form-item label="销售素材" prop="salesMaterial">
        <el-select v-model="queryParams.salesMaterial" placeholder="请选择">
          <el-option
            v-for="dict in sys_yes_or_no"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否推荐" prop="isRecommend">
        <el-select v-model="queryParams.isRecommend" placeholder="请选择">
          <el-option
            v-for="dict in sys_yes_or_no"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否隐藏" prop="status">
        <el-select v-model="queryParams.status" @change="handleQuery" placeholder="请选择">
          <el-option
            v-for="dict in sys_yes_or_no"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="handleAdd"
          v-hasPermi="['system:hairPost:add']"
          >新增
        </el-button>
      </el-col>
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="success"-->
<!--          plain-->
<!--          icon="Edit"-->
<!--          :disabled="single"-->
<!--          @click="handleUpdate"-->
<!--          v-hasPermi="['system:hairPost:edit']"-->
<!--          >修改-->
<!--        </el-button>-->
<!--      </el-col>-->
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="Delete"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:hairPost:remove']"
          >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="Download"
          @click="handleExport"
          v-hasPermi="['system:hairPost:export']"
          >导出
        </el-button>
      </el-col>
      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="hairPostList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
<!--      <el-table-column label="发布人头像" align="center" prop="avatar">-->
<!--        <template #default="scope">-->
<!--          <template v-if="scope.row.avatar != null">-->
<!--            <template v-for="item in scope.row.avatar.split(',')" :key="item">-->
<!--              <image-preview :src="item" :width="50" :height="50" />-->
<!--            </template>-->
<!--          </template>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="发布人昵称" align="center" prop="nickname" />
      <el-table-column label="发布人用户ID" align="center" prop="userId" />
      <el-table-column label="身份" align="center" prop="publishApplication">
        <template #default="scope">
          <el-tag effect="dark" v-if="scope.row.publishApplication == 1">官方</el-tag>
          <el-tag effect="dark" type="success" v-else>用户</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="标题" v-if="!showContent.includes(queryParams.type)" align="center" prop="title" show-overflow-tooltip />
      <el-table-column label="内容" v-else align="center" prop="content" show-overflow-tooltip />
      <el-table-column label="标签" v-if="queryParams.type == 2" align="center" prop="tags">
        <template #default="scope">
          <template v-if="scope.row.tags != null">
            <template v-for="item in scope.row.tags" :key="item">
              <el-tag>{{ item.topicLabel }}</el-tag>
            </template>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="分类" v-else align="center" prop="classifyValue">
        <template #default="scope">
          <el-tag v-for="item in hairPostClassifyList" :key="item.id" v-show="item.classifyValue === scope.row.classifyValue && item.owningPlate === scope.row.type">{{item.classifyLabel}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="分享数" align="center" prop="shareNum" />
      <el-table-column label="阅读数" v-if="!showContent.includes(queryParams.type)" align="center" prop="readCount" />
      <el-table-column label="评论数" align="center" prop="countNum" />
      <el-table-column label="点赞数" align="center" prop="likes" />
      <el-table-column label="点击人数" align="center" prop="readPersonNum" />
      <el-table-column label="平均停留时间" align="center" prop="svgReadTime">
        <template #default="scope">
          <span>{{ parseConvertTime(scope.row.svgReadTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="推荐" align="center" prop="isRecommend">
        <template #default="scope">
          <dict-tag :options="sys_yes_or_no" :value="scope.row.isRecommend" />
        </template>
      </el-table-column>
      <el-table-column label="销售素材" align="center" prop="salesMaterial">
        <template #default="scope">
          <dict-tag :options="sys_yes_or_no" :value="scope.row.salesMaterial" />
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template #default="scope">
          <dict-tag :options="sys_show_hide" :value="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column label="发布日期" align="center" prop="createTime" />
<!--      <el-table-column label="贴子类型" align="center" prop="typeString" />-->
<!--      <el-table-column-->
<!--        label="贴子标题"-->
<!--        align="center"-->
<!--        prop="title"-->
<!--        show-overflow-tooltip-->
<!--      />-->

<!--      <el-table-column label="阅读数" align="center" prop="readCount" />-->

<!--      <el-table-column label="帖子图片" align="center" prop="bannerUrls">-->
<!--        <template #default="scope">-->
<!--          <template v-if="scope.row.bannerUrls != null">-->
<!--            <template-->
<!--              v-for="item in scope.row.bannerUrls.split(',')"-->
<!--              :key="item"-->
<!--            >-->
<!--              <image-preview :src="item" :width="50" :height="50" />-->
<!--            </template>-->
<!--          </template>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="用户ip地址" align="center" prop="ip" />-->
<!--      <el-table-column label="ip坐落地区" align="center" prop="location" />-->
<!--      <el-table-column label="是否置顶" align="center" prop="isTop">-->
<!--        <template #default="scope">-->
<!--          <dict-tag :options="sys_yes_or_no" :value="scope.row.isTop" />-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column
        label="操作"
        align="center"
        fixed="right"
        width="260">
        <template #default="scope">
          <el-button link type="primary" @click="handleOpen(scope.row)"
            >查看评论</el-button
          >
          <el-button
            link
            type="primary"
            icon="Edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:hairPost:edit']"
            >修改
          </el-button>
          <el-button
            link
            type="primary"
            icon="Delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:hairPost:remove']"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <el-drawer
      v-model="table"
      title="帖子评论"
      direction="rtl"
      :close-on-click-modal="true"
      size="50%"
    >
      <div
        class="container"
        v-infinite-scroll="onLoadMore"
        :infinite-scroll-distance="1"
        :infinite-scroll-immediate="false"
      >
        <div style="width: 100%; display: flex;justify-content: flex-end;">
          <el-button  type="primary" @click="commentReply()">评论</el-button>
        </div>

        <div class="comment" v-for="(item,index) in comments" :key="index">
          <div class="info">
            <img class="avatar" :src="item.avatar" width="36" height="36" />
            <div class="right">
              <div class="name">{{ item.nickname }}</div>
              <div class="date">{{ item.createTime }}</div>
            </div>
          </div>
          <div class="content">
            <div>{{ item.content }}</div>
            <el-button  type="primary" @click="commentReply(item.id,item.id,index)">回复</el-button>
          </div>
          <div class="control">
            <span class="like" :class="{ active: item.isLike }">
              <i class="iconfont icon-like"></i>
              <span class="like-num">{{
                item.likes > 0 ? item.likes + "人赞" : "0人赞"
              }}</span>
            </span>
          </div>
          <div class="reply">
            <div class="item" v-for="(reply,index) in item.postChildCommentList" :key="index">
              <div class="reply-content-reply">
                <div class="reply-content">
                  <img
                    class="avatar"
                    :src="reply.avatar"
                    width="36"
                    height="36"
                  />
                  <span class="from-name">{{ reply.nickname }}</span
                  ><span>: </span>
                  <span v-if="reply.replyUserName != null" class="to-name">
                    回复 @{{ reply.replyUserName }}</span
                  >
                  <span>{{ reply.content }}</span>
                </div>
                <el-button  type="primary" @click="commentReply(item.id,reply.id)">回复</el-button>

              </div>

              <div class="reply-bottom">
                <span>{{ reply.createTime }}</span>
              </div>
            </div>
          </div>
          <!-- <div class="lording-more">加载更多</div> -->
        </div>
      </div>
      <el-empty v-if="comments.length === 0" :image-size="300"></el-empty>
    </el-drawer>

    <!-- 添加或修改极客侠小程序帖子对话框 -->
    <el-dialog :title="title" v-model="open" width="800px" append-to-body>
      <el-form
        ref="hairPostRef"
        :model="form"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="板块" prop="type">
          <el-select @change="changePostClassify(form.type)" v-model="form.type" placeholder="请选择">
            <el-option
              v-for="dict in post_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发布人头像" prop="avatar">
          <image-uploads v-model="form.avatar" :limit="1" />
        </el-form-item>
        <el-form-item label="发布人名称" prop="nickname">
          <el-input v-model="form.nickname" placeholder="请输入发布人名称" />
        </el-form-item>
<!--        <my-emoji v-model="form.nickname"></my-emoji>-->
        <el-form-item label="发布人标签" >
          <el-select clearable v-model="form.userLabelIds" placeholder="请选择标签">
            <el-option
              v-for="dict in labelConfigList"
              :key="dict.id"
              :label="dict.labelName"
              :value="dict.id + ''"
              @change="handleQuery"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="!postTitle.includes(form.type)" label="标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入贴子标题" />
        </el-form-item>
        <el-form-item v-if="plainTextType.includes(form.type)" label="内容" prop="content">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
            v-model="form.content"
          />
        </el-form-item>
        <el-form-item v-else label="内容" prop="content">
          <editor v-model="form.content" :min-height="192"/>
        </el-form-item>
        <el-form-item label="卡片封面">
          <image-uploads v-model="form.cardCover" :limit="1"></image-uploads>
        </el-form-item>
        <el-form-item label="视频封面">
          <image-uploads v-model="form.videoCover" :limit="1"></image-uploads>
        </el-form-item>
        <el-row v-if="plainTextType.includes(form.type)">
          <el-col :span="12">
            <el-form-item label="图片或视频">
              <el-select v-model="selectOpen" placeholder="请选择">
                <el-option label="上传图片" value="1" />
                <el-option label="上传视频" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
<!--          <el-col :span="12">-->
            <el-form-item v-if="selectOpen == 1" label="贴子图片" prop="bannerUrls">
              <image-uploads v-model="form.bannerUrls" :limit="9"></image-uploads>
            </el-form-item>
            <el-form-item v-else label="贴子视频" prop="bannerUrls">
              <videoUpload v-model="form.vedioUrls"></videoUpload>
            </el-form-item>
<!--          </el-col>-->
        </el-row>



<!--        <el-form-item label="缩略图" prop="thumbnailImg">-->
<!--          <image-uploads v-model="form.thumbnailImg" :limit="1"></image-uploads>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="视频文件">-->
<!--          <video-upload :isShow="false" v-model="videoUrl"></video-upload>-->
<!--        </el-form-item>-->

<!--        <el-form-item v-if="videoUrl">-->
<!--          <input-->
<!--            disabled="false"-->
<!--            v-model="videoUrl"-->
<!--            placeholder-class="input-placeholder"-->
<!--            style="width: 80%; padding: 10px; margin-right: 10px"-->
<!--            id="myInput"-->
<!--          />-->
<!--          <el-button type="primary" @click="copytex">复制</el-button>-->
<!--        </el-form-item>-->

        <el-row>
          <el-col :span="12">
            <el-form-item label="分类" v-if="form.type != 2" prop="classifyValue">
              <el-select clearable v-model="form.classifyValue" placeholder="请选择">
                <el-option
                  v-for="dict in postClassifyList"
                  :key="dict.id"
                  :label="dict.classifyLabel"
                  :value="dict.classifyValue"
                  :disabled="dict.status === '1'"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="form.type == 2" label="标签">
              <el-select
                v-model="form.tagArray"
                multiple
                :multiple-limit="3"
                placeholder="请选择标签"
              >
                <el-option
                  v-for="item in hairPostTopicList"
                  :key="item.id"
                  :label="item.topicLabel"
                  :value="item.id + ''"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否置顶" prop="isTop">
              <el-select v-model="form.isTop" placeholder="请选择">
                <el-option
                  v-for="dict in sys_yes_or_no"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否加精" prop="isRefined">
              <el-select v-model="form.isRefined" placeholder="请选择">
                <el-option
                  v-for="dict in sys_yes_or_no"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="销售素材" prop="salesMaterial">
              <el-select v-model="form.salesMaterial" placeholder="请选择">
                <el-option
                  v-for="dict in sys_yes_or_no"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否推荐" prop="isRecommend">
              <el-select v-model="form.isRecommend" placeholder="请选择">
                <el-option
                  v-for="dict in sys_yes_or_no"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="原创状态" prop="originalStatus">
          <el-radio-group v-model="form.originalStatus">
            <el-radio
              v-for="dict in sys_post_original_status"
              :key="dict.value"
              :label="dict.value"
            >{{ dict.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio
              v-for="dict in sys_show_hide"
              :key="dict.value"
              :label="dict.value"
            >{{ dict.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="submitForm"
            >确 定</el-button
          >
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 回复评论 -->
    <el-dialog title="回复评论" v-model="commentReplyOpen" width="500px" append-to-body>
      <el-form ref="commentReplyRef" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="发布人头像" prop="publisherAvatar">
          <image-uploads v-model="form.publisherAvatar" :limit="1"></image-uploads>
        </el-form-item>
        <el-form-item label="发布人名称" prop="publisherName">
          <el-input v-model="form.publisherName"  />
        </el-form-item>
        <el-form-item label="内容" prop="commentReplyContent">
          <el-input v-model="form.commentReplyContent" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="commentReplySubmitForm">确 定</el-button>
          <el-button @click="commentReplyCancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="HairPost">
import {
  listHairPost,
  getHairPost,
  delHairPost,
  addHairPost,
  updateHairPost,
  getTagList,
  postComment
} from "@/api/system/hairPost";
import {parseConvertTime} from "@/utils/ruoyi";
import { xcxListHairComment } from "@/api/system/hairComment";
import VideoUpload from "@/components/VideoUpload/index.vue";
import { listHairPostTopic } from "@/api/business/hairPostTopic";
import ImageUploads from "@/components/ImageUploads/index.vue";
import { listHairPostClassify } from "@/api/business/hairPostClassify";
import {listLabelConfig} from "@/api/business/labelConfig";
import MyEmoji from "@/components/MyEmoji/index.vue";
const { proxy } = getCurrentInstance();
const hairPostList = ref([]);

const {sys_show_hide,sys_post_original_status, sys_yes_or_no, post_type, post_publish_application,sys_normal_disable } =
  proxy.useDict(
    "sys_show_hide",
    "sys_post_original_status",
    "sys_yes_or_no",
    "post_type",
    "post_publish_application","sys_normal_disable"
  );
const labelConfigList = ref([]);
const plainTextType = ref(["1","2","6","7","8"]);
const postTitle = ref(["1","2"]);
const showContent = ref(["1","2"]);
const open = ref(false);
const commentReplyOpen = ref(false);//回复评论弹框
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const tagOptions = ref([]);
const table = ref(false);
const videoUrl = ref(undefined);
const isProgres = ref(false);
const progresValue = ref(0);
const hairPostTopicList = ref([]);
const hairPostClassifyList = ref([]);
const postClassifyList = ref([]);
const dateRange = ref([]);
const selectOpen = ref("1");
const postId = ref(null);
const parentId = ref(null);
const rootId = ref(null);
const commentReplyIndex = ref(null);


function onProgressIng(params) {
  isProgres.value = params;
}
function onProgress(params) {
  console.log("上传的进度=>>>>>>>>", params);
  progresValue.value = Number(params.toFixed(0));
}
function onProgressEnd(params) {
  isProgres.value = params;
}

function onVideoUrl(val) {
  console.log(val);
  videoUrl.value = val;
}

/** 复制代码成功 */
function copytex() {
  /* 获取文本内容 */
  var copyText = document.getElementById("myInput");

  copyText.setSelectionRange(0, 99999);
  navigator.clipboard.writeText(copyText.value);

  var tooltip = document.getElementById("myTooltip");
  tooltip.innerHTML = "复制内容: " + copyText.value;
}
const handleOpen = (row) => {
  console.log(row);
  postId.value = row.id
  table.value = true;
  getCommentList(row.id);
};

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    type: "2",
    userId: undefined,
    avatar: undefined,
    nickname: undefined,
    title: undefined,
    content: undefined,
    status: undefined,
    readCount: undefined,
    likes: undefined,
    tagIds: undefined,
    bannerUrls: undefined,
    ip: undefined,
    location: undefined,
    isTop: undefined,
    isRefined: undefined,
    salesMaterial: undefined,
    isRecommend: undefined,
    publisherAvatar:undefined,
    publisherName:undefined,
    commentReplyContent:undefined
  },
  rules: {},
});

const { queryParams, form, rules } = toRefs(data);
const comments = ref([
  {
    id: "comment0001", //主键id
    createTime: "2018-07-05 08:30", //评论时间
    nickname: "犀利的评论家", //评论者昵称
    avatar:
      "http://ww4.sinaimg.cn/bmiddle/006DLFVFgy1ft0j2pddjuj30v90uvagf.jpg", //评论者头像
    likes: 3, //点赞人数
    content: "非常靠谱的程序员", //评论内容
    postChildCommentList: null,
  },
]);
onMounted(() => {
  window.addEventListener("scroll", scrolling);
});
onUnmounted(() => {
  window.removeEventListener("scroll", scrolling);
});

function scrolling() {
  return;
  // 滚动条距文档顶部的距离
  let scrollTop =
    window.pageYOffset ||
    document.documentElement.scrollTop ||
    document.body.scrollTop;
  // 滚动条滚动的距离
  let scrollStep = scrollTop - data.oldScrollTop;
  console.log("header 滚动距离 ", scrollTop);
  // 更新——滚动前，滚动条距文档顶部的距离
  data.oldScrollTop = scrollTop;

  //变量windowHeight是可视区的高度
  let windowHeight =
    document.documentElement.clientHeight || document.body.clientHeight;
  //变量scrollHeight是滚动条的总高度
  let scrollHeight =
    document.documentElement.scrollHeight || document.body.scrollHeight;

  //滚动条到底部的条件
  if (scrollTop + windowHeight == scrollHeight) {
    //你想做的事情
    console.log("header  你已经到底部了");
  }
  if (scrollStep < 0) {
    console.log("header 滚动条向上滚动了！");
  } else {
    console.log("header  滚动条向下滚动了！");
  }
  // 判断是否到了最顶部
  if (scrollTop <= 0) {
    console.log("header 到了最顶部");
  }
}
function commentReply(parent,root){
  if(parent){
    parentId.value = root
    rootId.value = parent
  }
  commentReplyOpen.value = true
}
/** 回复提交按钮 */
function commentReplySubmitForm() {
  proxy.$refs["commentReplyRef"].validate(valid => {
    if(valid){
      let data = {
        postId:postId.value
      }
      if(parentId.value){
        data.parentId = parentId.value
      }
      if(rootId.value){
        data.rootId = rootId.value
      }
      if(form.value.publisherAvatar){
        data.avatar = form.value.publisherAvatar
      }
      if(form.value.publisherName){
        data.nickname = form.value.publisherName
      }
      if(form.value.commentReplyContent){
        data.content = form.value.commentReplyContent
      }
      postComment(data).then(res=>{
        proxy.$modal.msgSuccess("回复成功");
        getCommentList(postId.value)
        commentReplyOpen.value = false
        form.value.commentReplyContent = ''
      })
    }
  });
}
// 取消按钮
function commentReplyCancel() {
  commentReplyOpen.value = false
  reset();
}
/**触底事件 */
function onLoadMore(e) {
  // console.log(e, "触底");
  // const clientHeight = e.target.clientHeight;
  // const scrollHeight = e.target.scrollHeight;
  // const scrollTop = e.target.scrollTop;
  // if (scrollTop + clientHeight >= scrollHeight) {
  //   console.log("到底了!");
  //   bottom.value = true;
  // } else {
  //   bottom.value = false;
  // }
}

/** 查询极客侠小程序帖子列表 */
function getList() {
  loading.value = true;
  listHairPost(proxy.addDateRange(queryParams.value, dateRange.value)).then((response) => {
    hairPostList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });


  listLabelConfig({ pageNum: 1, pageSize: 99999 }).then(response => {
    labelConfigList.value = response.rows;
  });
}

/** 查询极客侠小程序评论列表 */
function getCommentList(id) {
  // loading.value = true;
  const commentQueryParams = {
    pageNum: 1,
    pageSize: 9999,
    postId: id,
  };
  xcxListHairComment(commentQueryParams).then((response) => {
    comments.value = response.rows;
    // loading.value = false;
  });
}

// 取消按钮
function cancel() {
  open.value = false;
  reset();
}


// 表单重置
function reset() {
  form.value = {
    id: null,
    selectOpen: "1",
    userId: null,
    avatar: null,
    nickname: null,
    type: "2",
    title: null,
    content: null,
    status: "0",
    readCount: null,
    likes: null,
    tagIds: null,
    bannerUrls: null,
    ip: null,
    location: null,
    delFlag: null,
    createBy: null,
    createTime: null,
    updateBy: null,
    updateTime: null,
    isTop: "0",
    isRefined: "0",
    vedioUrls: null,
    salesMaterial: "0",
    isRecommend: "0",
  };
  videoUrl.value = undefined;
  proxy.resetForm("hairPostRef");
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
  getPostTopicList();
  getClassifyList();
}

/** 重置按钮操作 */
function resetQuery() {
  queryParams.value.title = null;
  dateRange.value = [];
  proxy.resetForm("queryRef");
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加极客侠小程序帖子";
  getTagList().then((response) => {
    tagOptions.value = response.data;
  });
}

// 根据路径判断当前附件为图片还是视频
function determineFileType(filePath) {
  const imageExtensions = ['jpg', 'jpeg', 'png', 'gif'];
  const videoExtensions = ['mp4', 'avi', 'mov', 'mkv'];
  console.log(filePath);


  const fileExtension = filePath.toLowerCase().split('.').pop();

  console.log(fileExtension);
  if (imageExtensions.includes(fileExtension)) {
    return 'image';
  } else if (videoExtensions.includes(fileExtension)) {
    return 'video';
  } else {
    return 'unknown';
  }
}

/** 修改按钮操作 */
function handleUpdate(row) {
  loading.value = true;
  reset();
  console.log(row)
  const _id = row.id || ids.value;
  getHairPost(_id).then((response) => {
    loading.value = false;
    form.value = response.data;
    form.value.isTop = response.data.isTop.toString();
    form.value.salesMaterial = response.data.salesMaterial.toString();
    form.value.isRecommend = response.data.isRecommend.toString();
    form.value.isRefined = response.data.isRefined.toString();
    form.value.status = response.data.status.toString();
    tagOptions.value = response.data.tagList;
    if(response.data.bannerUrls != null && response.data.bannerUrls != ""){
      const first = response.data.bannerUrls.split(",")[0];
      if (determineFileType(first) === 'image') {
        selectOpen.value = "1"
      }else {
        selectOpen.value = "2"
        form.value.vedioUrls = response.data.bannerUrls
        form.value.bannerUrls = ""
      }
    }
    postClassifyList.value = hairPostClassifyList.value.filter(t => t.owningPlate == form.value.type);

    open.value = true;
    title.value = "修改极客侠小程序帖子";
  });
}

/** 查询帖子话题列表 */
function getPostTopicList() {
  listHairPostTopic({pageNum: 1, pageSize: 999999,status: "0"}).then(response => {
    hairPostTopicList.value = response.rows;
  });
}
/** 查询帖子分类列表 */
function getClassifyList() {
  listHairPostClassify({pageNum: 1, pageSize: 999999,status: "0"}).then(response => {
    hairPostClassifyList.value = response.rows;
    postClassifyList.value = response.rows.filter(t => t.owningPlate == 2);
  });
}
getClassifyList();
getPostTopicList();
/** 提交按钮 */
function submitForm() {
  console.log(form.value);
  proxy.$refs["hairPostRef"].validate((valid) => {
    if (valid) {
      buttonLoading.value = true;

      //修改tag标签的提交体
      if (form.value.tagArray != null) {
        form.value.tagIds = form.value.tagArray.toString();
      }

      //修改视频的数据
      if (form.value.vedioUrls != null) {
        form.value.bannerUrls = form.value.vedioUrls;
      }

      if (form.value.id != null) {
        updateHairPost(form.value)
          .then((response) => {
            proxy.$modal.msgSuccess("修改成功");
            open.value = false;
            getList();
          })
          .finally(() => {
            buttonLoading.value = false;
          });
      } else {
        addHairPost(form.value)
          .then((response) => {
            proxy.$modal.msgSuccess("新增成功");
            open.value = false;
            getList();
          })
          .finally(() => {
            buttonLoading.value = false;
          });
      }
    }
  });
}

function changePostClassify(type) {
   form.value.classifyValue = null;
   postClassifyList.value = hairPostClassifyList.value.filter(t => t.owningPlate == type);
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _ids = row.id || ids.value;
  proxy.$modal
    .confirm('是否确认删除极客侠小程序帖子编号为"' + _ids + '"的数据项？')
    .then(function () {
      loading.value = true;
      return delHairPost(_ids);
    })
    .then(() => {
      loading.value = true;
      getList();
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => {})
    .finally(() => {
      loading.value = false;
    });
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download(
    "system/hairPost/export",
    {
      ...queryParams.value,
    },
    `hairPost_${new Date().getTime()}.xlsx`
  );
}

getList();
</script>
<style scoped lang="scss">
.container {
  padding: 0 10px;
  box-sizing: border-box;
  overflow-y: auto;
  .comment {
    display: flex;
    flex-direction: column;
    padding: 10px;
    border-bottom: 1px solid #f2f6fc;
    .info {
      display: flex;
      align-items: center;
      .avatar {
        border-radius: 50%;
      }
      .right {
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        .name {
          font-size: 16px;
          color: #303133;
          margin-bottom: 5px;
          font-weight: 500;
        }
        .date {
          font-size: 12px;
          color: #909399;
        }
      }
    }
    .content {
      font-size: 16px;
      color: #303133;
      line-height: 20px;
      padding: 10px 0;
      display: flex;
      justify-content: space-between;
    }
    .control {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #909399;
      .like {
        display: flex;
        align-items: center;
        margin-right: 20px;
        cursor: pointer;
        &.active,
        &:hover {
          color: #409eff;
        }
        .iconfont {
          font-size: 14px;
          margin-right: 5px;
        }
      }
      .comment-reply {
        display: flex;
        align-items: center;
        cursor: pointer;
        &:hover {
          color: #333;
        }
        .iconfont {
          font-size: 16px;
          margin-right: 5px;
        }
      }
    }
    .reply {
      margin: 10px 0;
      border-left: 2px solid #dcdfe6;
      .item {
        margin: 0 10px;
        padding: 10px 0;
        border-bottom: 1px dashed #ebeef5;
        .reply-content-reply{
          display: flex;
          justify-content: space-between;
          .reply-content {
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #303133;
            .avatar {
              margin-right: 10px;
            }
            .from-name {
              color: #409eff;
            }
            .to-name {
              color: #409eff;
              margin-left: 5px;
              margin-right: 5px;
            }
          }
        }
        .reply-bottom {
          display: flex;
          align-items: center;
          margin-top: 6px;
          font-size: 12px;
          color: #909399;
          .reply-text {
            display: flex;
            align-items: center;
            margin-left: 10px;
            cursor: pointer;
            &:hover {
              color: #333;
            }
            .icon-comment {
              margin-right: 5px;
            }
          }
        }
      }
      .write-reply {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #909399;
        padding: 10px;
        cursor: pointer;
        &:hover {
          color: #303133;
        }
        .el-icon-edit {
          margin-right: 5px;
        }
      }
      .fade-enter-active,
      fade-leave-active {
        transition: opacity 0.5s;
      }
      .fade-enter,
      .fade-leave-to {
        opacity: 0;
      }
      .input-wrapper {
        padding: 10px;
        .gray-bg-input,
        .el-input__inner {
          /*background-color: #67C23A;*/
          ::after {
            content: "";
          }
        }
        .btn-control {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          padding-top: 10px;
          .cancel {
            font-size: 16px;
            color: #606266;
            margin-right: 20px;
            cursor: pointer;
            &:hover {
              color: #333;
            }
          }
          .confirm {
            font-size: 16px;
          }
        }
      }
    }
  }
}
.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2036;
}
</style>
